<template>
  <view>
    <!-- 自定义tanBar -->
    <view class="tab-block">
      <ul class='tab-list flex flex-center' :class="showMiddleButton === true?'tab-list-middle':'tab-list-default'">
        <li v-for="(item, index) in tabList" :class="'list-item flex flex-column flex-middle ' + item.middleClass"
          @click="handlePush(item, index)" :key="index">
          <view class="item-img-box">
            <image class="item-img" :src="tabIndex == index ? item.selectedIconPath : item.iconPath" />
          </view>
          <view class="item-text font-20 color-black">
            {{item.text}}
          </view>
        </li>
      </ul>
      <view class="tab-bar" v-show="showTabBar === true"></view>
    </view>
    <!-- 弹出窗 -->
    <view class="popUp" v-show="vanish" @click.stop="yinChang">
      <view class="showData">
        <!-- 上传表情 -->
        <view class="showData-item" @click.stop="expression(1)">
          <image src="../../static/imag/icon_a1.png"></image>
          <text>上传表情</text>
        </view>
        <!-- 上传头像 -->
        <view class="showData-item" @click.stop="expression(2)">
          <image src="../../static/imag/icon_a1.png"></image>
          <text>上传头像</text>
        </view>
        <!-- 上传语句 -->
        <view class="showData-item" @click.stop="expression(3)">
          <image src="../../static/imag/icon_a1.png"></image>
          <text>上传语句</text>
        </view>
      </view>
    </view>
    <!-- 弹出窗 -->
  </view>
</template>

<script>
  export default {
    props: {
      tabIndex: { //当前选中的tab项
        type: Number,
        default: 0,

      }
    },
    data() {
      return {

        /*
         * iconPath: 默认icon图片路径
         * selectedIconPath: 选中icon图片路径 
         * text: tab按钮文字
         * pagePath:页面路径
         * middleClass:中间按钮样式类名
         * tabList最小两项，最多五项
         * tabList长度为奇数时，中间按钮才会突出显示
         * 
         */
        tabList: [{
            iconPath: '../../static/taBar/home.png',
            selectedIconPath: "../../static/taBar/home-color.png",
            text: '首页',
            pagePath: '/pages/index/index',
          },
          {
            iconPath: '../../static/taBar/huashu.png',
            selectedIconPath: '../../static/taBar/huashu-color.png',
            text: '恋爱话术',
            pagePath: '/pages/verbalTrick/verbalTrick',
          },

          {
            iconPath: '../../static/taBar/shangchuan.png',
            selectedIconPath: '../../static/taBar/shangchuan.png',
            text: '上传',
          },

          {
            iconPath: '../../static/taBar/fuli.png',
            selectedIconPath: '../../static/taBar/fuli-color.png',
            text: '福利',
            pagePath: '/pages/welfare/welfare'
          },
          {
            iconPath: '../../static/taBar/my.png',
            selectedIconPath: '../../static/taBar/my-color.png',
            text: '我的',
            pagePath: '/pages/my/my',
          }
        ],
        showTabBar: false,
        showMiddleButton: false,
        vanish: false //遮罩层
      };
    },
    computed: {
      getHeight() {
        return Number(this.height);
      },
    },
    mounted() {
      this.getSystemInfo()
      this.setTabBar()
    },
    methods: {
      // 
      // 点击上传
      expression(i) {
        if (i == 1) {
          console.log('上传表情')
        } else if (i == 2) {
          console.log('上传头像')
        } else {
          console.log('上传语句')
        }
      },
      //点击隐藏遮罩层
      yinChang() {
        this.vanish = false
      },
      //判断中间按钮是否突出显示
      setTabBar() {
        let tabLength = this.tabList.length
        if (tabLength % 2) {
          this.showMiddleButton = true
          let middleIndex = Math.floor(tabLength / 2)
          this.tabList[middleIndex].middleClass = 'mid-button'
        }
      },
      //点击按钮
      handlePush(item, index) {
        // 如果索引为2就是点击中间+号了
        if (index == 2) {
          this.vanish = true
        }
        if (this.tabIndex !== index) {
          uni.reLaunch({
            url: `${item.pagePath}?tabIndex=${index}`,
          })
        }
      },
      //兼容iPhoneX以上底部黑线条的显示
      getSystemInfo() {
        uni.getSystemInfo({
          success: (res) => {
            // X及以上的异形屏top为44，非异形屏为20
            if (res.safeArea.top > 20) {
              this.showTabBar = true
            }
          }
        });
      },
    }
  }
</script>

<style lang="scss">
  .flex {
    display: flex;
    flex-flow: row wrap;
  }

  .flex-center {
    align-items: center;
    justify-content: center;
  }

  .flex-column {
    flex-direction: column;
  }

  .flex-middle {
    align-items: center;
  }

  .font-20 {
    font-size: 20rpx;
  }

  .tab-block {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    background-size: contain;
    width: 100%;

    .tab-list {
      height: 100rpx;
      padding: 0;
    }

    .tab-list-default {
      background-color: #FFFFFF;
      border-top: 1px #dddddd solid;
    }

    .tab-list-middle {
      position: relative;
      background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
      background-size: cover;
    }

    .list-item {
      flex: 1;

      .item-img-box {
        width: 44rpx;
        height: 42rpx;
        margin-bottom: 9rpx;
        position: relative;
      }

      .item-img {
        width: 44rpx;
        height: 42rpx;
      }
    }

    .mid-button {
      position: relative;

      .item-img-box {
        width: 106rpx;
        height: 106rpx;
        margin-bottom: 9rpx;
        position: absolute;
        z-index: 1002;
        top: -104rpx;
      }

      .item-img {
        width: 106rpx;
        height: 106rpx;
      }

      .item-text {
        font-size: 20rpx;
        color: #fff;
        position: absolute;
        z-index: 1002;
        bottom: -40rpx;
      }
    }

    .tab-bar {
      height: 30rpx;
      background-color: #FFFFFF;
    }
  }

  .tanChuang {
    background-color: pink;
  }

  // 遮罩层
  .popUp {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5000;

    .showData {
      width: 100%;
      height: 400rpx;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;

      .showData-item {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        image {
          width: 88rpx;
          height: 88rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
</style>
